<template>
  <div :style="{height: xqHeight + 'px','overflow-y': 'auto','padding-bottom': 15 + 'px',}">
    <template v-if="demandList.length > 0">
      <div v-for="(item, index) in demandList" :key="index" class="demand-content">
        <div class="demand-top">
          <div class="top-left">
            <div>{{ item.requirementName }}</div>
            <div>激活</div>
          </div>
          <div class="top-right">
            <img src="../../../../../static/project/cz.png" alt="" @click="detailDemand(item)" />
            <img src="../../../../../static/project/five.png" alt="" @click="demandDelete(item)" />
          </div>
        </div>
        <div class="demand-more">
          <div>需求编号</div>
          <div>{{ item.requirementNumber }}</div>
        </div>
        <div class="demand-more">
          <div>需求描述</div>
          <div>{{ item.requirementDesc }}</div>
        </div>
        <div class="demand-more">
          <div>需求状态</div>
          <div v-if="item.requirementStatus=='wait'">
            未开始
          </div>
          <div v-else-if="item.requirementStatus=='doing'">
            进行中
          </div>
          <div v-else-if="item.requirementStatus=='suspend'">
            已挂起
          </div>
          <div v-else>
            已关闭
          </div>
        </div>
        <div class="demand-more">
          <div>创建时间</div>
          <div>{{ item.createTime | timeFormat }}<span>h</span></div>
        </div>
      </div>
    </template>
    <!-- <van-empty v-else description="暂无数据" /> -->
    <uni-load-more class="load-more" :status="moreStatus" />
  </div>
</template>

<script>
import { getDeviceInfo } from '@/utils/storage'
import { formatTimestamp } from '@/utils/format'
import { deleteDemend } from '@/apis/project'
export default {
  filters: {
    timeFormat(value) {
      return	formatTimestamp(value)
    },
  },
  props: {
    demandList: {
      type: Array,
    },
  },
  data() {
    return {
      xqHeight: 0,
      demandId: '',
      detailInfo: {},
    }
  },
  mounted() {
    this.setHeight()
  },
  methods: {
    setHeight() {
      const	{ screenHeight, statusBarHeight, navbarHeight } = getDeviceInfo()
      this.xqHeight = screenHeight - statusBarHeight - navbarHeight - 224
    },
    detailDemand(item) {
      uni.navigateTo({
        url: `/pages/index/tabs/overview/demand-detail?param=${encodeURIComponent(JSON.stringify(item))}`,
      })
    },
    demandDelete(item) {
      const	num = item.id
      this.$emit('getChildDialog', num)
    },
  },
}
</script>
<style lang="scss" scoped>
.demand-content {
  width: 93%;
  margin: 0 auto;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  padding-bottom: 1px;
  margin-bottom: 10px;
  .demand-top {
    padding: 15px 10px 0px 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .top-left {
      display: flex;
      div:nth-child(1) {
        font-size: 16px;
        color: #333;
        font-weight: 600;
        margin-right: 15px;
      }
      div:nth-child(2) {
        background: rgba(115, 158, 202, 0.1);
        border-radius: 2px;
        border: 1px solid #739eca;
        color: #739eca;
        font-size: 14px;
        padding: 0px 5px;
      }
    }
    .top-right {
      display: flex;
      img {
        width: 16px;
        height: 16px;
      }
    }
  }
  .demand-more {
    margin-bottom: 10px;
    padding: 0px 10px 0px 10px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
<style lang="scss">
	.load-more text{
		padding-bottom: 15px;
	}
</style>
